<template>
  <div class="tags-container">
    <el-card shadow="never">
      <el-row class='top-input'>
        <el-col :span='5'>
          <span class='tagtitle'>标签名称</span>
          <el-input v-model="queryInfo.tagName"></el-input>
        </el-col>
        <el-col :span='7'>
          <span class='status'>状态</span> &nbsp;&nbsp;<el-select v-model="queryInfo.state"
            placeholder="请选择">
            <el-option label="禁用" value="0"></el-option>
            <el-option label="启用" value="1"></el-option>
          </el-select>
        </el-col>

        <el-col :span='3'>
          <el-button size='small' @click='clearClick'>清除</el-button>
          <el-button size='small' type="primary" @click='getTableData'>搜索</el-button>
        </el-col>
        <!-- 新增标签 -->
        <el-col :span='3' :offset="6">
          <el-button class='addtag' type="success" size='small' icon="el-icon-edit"
            @click='addFormShow'>新增标签</el-button>
        </el-col>
      </el-row>
      <el-alert :title="'数据一共'+total+'条'" type="info" show-icon :closable="false">
      </el-alert>

      <template>
        <el-table :data="tableData" style="width: 100%" highlight-current-row>
          <el-table-column type='index' label='序号' width='100'>
          </el-table-column>
          <el-table-column label="所属学科" prop='subjectName'>
          </el-table-column>
          <el-table-column label="标签名称" prop='tagName'>
          </el-table-column>
          <el-table-column label="创建者" prop='username'>
          </el-table-column>
          <el-table-column label="创建日期">
            <template slot-scope='scope'>
              {{scope.row.addDate| parseTimeByString}}
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope='scope'>
              {{scope.row.state===1 ? '已开启': '已禁用'}}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope='scope'>
              <el-button type='text' @click='toggleStatus(scope.row)'>
                {{scope.row.state===0?'启用':'禁用'}}</el-button>
              <el-button type='text' :disabled='scope.row.state===1'
                @click='editHandlerClick(scope.row)'>修改</el-button>
              <el-button type='text' :disabled='scope.row.state===1' @click='deleteTag(scope.row)'>
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryInfo.page" :page-sizes="[5, 10, 20, 50]"
          :page-size="queryInfo.pagesize" layout="  prev, pager, next,sizes, jumper" background
          :total='total'>
        </el-pagination>
      </template>

      <!-- 新增目录 对话框-->
      <el-dialog title="修改目录" :visible.sync="addDialogVisible" width="30%" @close='handlerAddClose'>
        <el-form :model="addTagForm" :rules="addTagFormRules" ref="addruleFormRef"
          label-width="100px" class="demo-ruleForm">
          <el-form-item label="所属学科">
            <el-select v-model="addTagForm.subjectID" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.subjectName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop='tagName'>
            <el-input v-model="addTagForm.tagName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click='submitAddTagFrom'>确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改标签名 对话框-->
      <el-dialog title="修改目录" :visible.sync="editDialogVisible" width="30%" @close='handlerClose'>
        <el-form :model="editTagForm" :rules="editTagFormRules" ref="ruleFormRef"
          label-width="100px" class="demo-ruleForm">
          <el-form-item label="所属学科">
            <el-select v-model="editTagForm.subjectName" placeholder="请选择">
              <el-option v-for="item in options" :key="item.id" :label="item.subjectName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop='tagName'>
            <el-input v-model="editTagForm.tagName"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click='submitTagFrom'>确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { list as getTagList, update as editTag, changeState as changeTagStatus, add as addTag, remove as deleteTag } from '@/api/hmmm/tags'
import { list as getSubList } from '@/api/hmmm/subjects'
import { parseTimeByString } from '@/filters'
export default {
  name: 'tag',
  filters: {
    parseTimeByString
  },
  data () {
    return {
      tableData: [],
      tagList: [],
      queryInfo: {
        page: 1,
        pagesize: 10,
        subjectID: null,
        tagName: null,
        state: null
      },
      editDialogVisible: false,
      editTagForm: { // 修改表单数据
        subjectID: this.getSubjectID,
        tagName: '',
        subjectName: ''
      },
      subjectName: '',
      rowId: '', // 每条数据的id
      editTagFormRules: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      counts: 0,
      options: [],
      addTagForm: { // 添加目录数据
        subjectID: '',
        tagName: ''
      },
      addDialogVisible: false,
      addTagFormRules: { // 添加目录验证规则
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      total: 0
    }
  },
  methods: {
    async editHandlerClick (row) {
      this.editTagForm.tagName = row.tagName
      this.editTagForm.subjectID = row.subjectID
      this.editTagForm.subjectName = row.subjectName
      try {
        const { data } = await getSubList()
        // console.log(data);
        this.rowId = row.id
        this.options = data.items
      } catch (err) {
        console.log(err)
      }
      this.editDialogVisible = true
    },
    submitTagFrom () {
      this.$refs.ruleFormRef.validate(async valid => {
        if (!valid) return this.$message('请输入有效的表单值')
        try {
          await editTag({
            subjectID: this.editTagForm.subjectID,
            tagName: this.editTagForm.tagName,
            id: this.rowId
          })
          this.$message.success('编辑成功')
          this.getTableData()
        } catch (err) {
          this.$message.fail('编辑失败')
        }
        this.editDialogVisible = false
      })
    },
    async toggleStatus (row) { // 切换禁用启用状态
      try {
        await changeTagStatus(row.id + '/' + row.subjectID)
        this.$message.success('切换成功')
        if (row.state === 1) {
          row.state = 0
        } else {
          row.state = 1
        }
      } catch (err) {
        console.log(err)
        this.$message.fail('切换失败')
      }
    },
    async deleteTag (row) { // 删除表单一项
      const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(e => e)
      if (res === 'cancel') return this.$message.info('取消操作')
      try {
        await deleteTag(row.id)
        this.$message.success('删除成功')
        if (this.tableData.length) { // 本页有数据,当前页数大于1就减减
          this.queryInfo.page > 1 && this.queryInfo.page--
        }
        this.getTableData()
      } catch (err) {
        console.log(err, 'deleteTag')
        this.$message.fail('删除失败')
      }
    },
    handlerClose () {
      this.$refs.ruleFormRef.resetFields()
      this.editTagForm.subjectID = ''
    },
    clearClick () { // 清除搜索框内容
      this.queryInfo = {
        tagName: '', state: ''
      }
    },
    async addFormShow () {
      try {
        const { data } = await getSubList({})
        this.options = data.items
      } catch (err) {
        console.log(err)
      }
      this.addDialogVisible = true
    },
    // 获取页面数据
    async getTableData () {
      try {
        const { data } = await getTagList(this.queryInfo)
        console.log(data)
        this.total = data.counts
        this.tableData = data.items
      } catch (err) {
        console.log(err)
      }
    },
    handlerAddClose () {
      this.$refs.addruleFormRef.resetFields()
    },
    submitAddTagFrom () {
      this.$refs.addruleFormRef.validate(async valid => {
        if (!valid) return this.$message.info('请输入有效的表单数据')
        // console.log(this.addTagForm);
        try {
          await addTag(this.addTagForm)
          this.$message.success('添加成功')
          this.getTableData()
        } catch (err) {
          console.log(err)
          this.$message.fail('添加失败')
        }
        this.addDialogVisible = false
      })
    },
    // 分页功能
    handleSizeChange (size) {
      this.queryInfo.pagesize = size
      this.getTableData()
    },
    handleCurrentChange (page) {
      this.queryInfo.page = page
      this.getTableData()
    }
  },
  created () {
    this.getTableData()
  }
}
</script>
<style lang="scss" scoped>
::v-deep.tags-container {
  padding: 10px;
}
::v-deep.el-col {
  display: flex;
  align-content: center;
  justify-content: center;
  line-height: 32px;
  .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
}
.tagtitle {
  display: inline-block;
  width: 109px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.status {
  display: inline-block;
  width: 55px;
  margin-left: 60px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
}
.addtag {
  float: right;
}
.el-row {
  margin-bottom: 23px;
}
::v-deep.el-table th,
.el-table tr {
  background-color: #fafafa;
  // box-shadow: 0 0 5px 5px #ccc;
}
.el-alert {
  margin-bottom: 30px;
}
::v-deep.el-dialog__header {
  background-color: #409eff;
  color: #fff;
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}
.el-pagination {
  float: right;
  right: 0;
  margin-top: 20px;
}
::v-deep.top-input .el-input--suffix .el-input__inner {
  width: 215px;
}
</style>
